<template>
    <div class="page">
        <!--顶部-->
        <div class="top">
            <div class="back"></div>
            <div class="search">
                <input placeholder="请输入宝贝名称"/>
                <div class="icon"></div>
            </div>
        </div>
        <div class="recent-search">最近搜索</div>
        <div class="hot-search">热门搜索</div>
    </div>
</template>

<script>
    export default {
        name: "my-search"
    }
</script>

<style scoped>
    .top {width: 100%; height: 1rem; background-color: #ffffff; border-bottom: 1px solid #EFEFEF;
            display: flex; justify-content: start; align-items: center}
    .top .back{width: 0.6rem; height: 0.6rem; background-image: url("../../assets/images/common/search_x.png");
            background-size: 100%; background-repeat: no-repeat; margin-left: 0.2rem}
    .top .search {width: 70%; height: 0.8rem; }
    .top .search input{ }
</style>